import { useEffect, useRef, useState } from 'react';
type User = {
  name: string,
  age: number
}
// type Props = {
//   className:string
// }
interface Props {
  className: string,
  title?: string,
  getSonData?: (msg: string) => void
}
// 子组件
const Button = (props: Props) => {
  console.log(props)
  const { className, title, getSonData } = props
  // 给父组件传值
  const clickBUt = () => {
    getSonData?.('我是给父组件穿的值')
  }
  return (
    <button onClick={clickBUt}>{className} {title}我是子组件</button>
  )
}
// 父组件
function App() {
  const [value, toggle] = useState<User | null>(null)
  const changeValue = () => {
    toggle(null)
    toggle({
      name: 'tom',
      age: 18
    })
  }
  const getSonData = (msg: string) => {
    console.log('我是接受子组件的值', msg)
  }
  // useRef div:HTMLDivElement input:HTMLInputElement span:HTMLSpanElement
  // useRef 1.获取dom 2.稳定引用的存储器（定时器管理）
  const divDom = useRef<HTMLDivElement>(null)
  const inpDom = useRef<HTMLInputElement>(null)
  const timer = useRef<number | undefined>(undefined)
  useEffect(() => {
    // 可选链?. 前面不为空值执行点运算
    // 类型守卫 防止出现空值点运算错误
    inpDom.current?.focus()
    // 1、首先渲染，并不会执行useEffect中的 return
    // 2、变量修改后，导致的重新render，会先执行 useEffect 中的 return，再执行useEffect内除了return部分代码。
    // 3、return 内的回调，可以用来清理遗留垃圾，比如订阅或计时器 ID 等占用资源的东西

    timer.current = setInterval(() => {
      console.log('我是定时器')
    }, 1000)
    return ()=> clearInterval(timer.current)
  }, [])
  return (
    <>
      <input type="text" ref={inpDom} />
      <Button getSonData={getSonData} className='test' title='我是子组件名称' />
      <div ref={divDom}>
        {/* 为了类型安全，可以使用?.方法，当user存在的时候才会进行.运算
         */}
        thisis安排{value?.age}
        <div onClick={changeValue}>dianji</div>
      </div>
    </>
  )
}

export default App
